<template>
  <div class="content-pan">
    <!-- 左侧导航栏 -->
    <div class="content-pan-left">
      <div
        v-for="(item, i) in navigatorList" 
        :key="i"
        :class="curNavClass(item)"
        @click="changeLeftRoute(item)"
      >
        <i :class="item.icon" style="font-weight: bold;font-size: 16px;"></i>
        <span :style="{ marginLeft: item.icon ? '8px' : '' }">{{ item.name }}</span>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="content-pan-right">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'ContentPan',
  computed: {
    ...mapState(['curRouteCntLeft']),
    curNavClass() {
      return function(item) {
        let styleClass = 'pan-left-item';
        if (!item.icon) styleClass += ' no-icon';
        if (item.name === this.curRouteCntLeft) styleClass += ' active';
        return styleClass;
      }
    }
  },
  data() {
    return {
      navigatorList: [
        { name: '全部文件', route: '/content/pan/all-files', icon: 'el-icon-document-copy' },
        { name: '图片', route: '/content/pan/picture' },
        { name: '文档', route: '/content/pan/document' },
        { name: '视频', route: '/content/pan/video' },
        { name: '种子', route: '/content/pan/seed' },
        { name: '音乐', route: '/content/pan/audio' },
        { name: '其他', route: '/content/pan/other' },
        { name: '我的分享', route: '/content/pan/no-use', icon: 'el-icon-share' },  
        { name: '回收站', route: '/content/pan/no-use', icon: 'el-icon-delete' },  
        { name: '收集文件', route: '/content/pan/no-use', icon: 'el-icon-folder-opened' },  
      ],
    }
  },
  methods: {
    changeLeftRoute(item) {
      this.$store.commit('setCurCntLeftRoute', item.name);
      this.$router.push(item.route);
    }
  }
}
</script>

<style lang="less">
.content-pan {
  height: calc(100% - 62px);
  overflow: hidden;

  .content-pan-left {
    width: 194px;
    padding-top: 10px;
    display: inline-block;
    vertical-align: top;

    .pan-left-item {
      width: 100%;
      height: 38px;
      padding-left: 27px;
      box-sizing: border-box;
      line-height: 38px;
      font-size: 14px;
      color: #666666;
      cursor: pointer;
      
      &.no-icon {
        padding-left: 50px;
      }

      &:hover {
        background-color: rgb(234, 234, 234);
        color: #09AAFF;
      }

      &.active {
        background-color: rgb(234, 234, 234);
        color: #09AAFF;
      }
    }
  }

  .content-pan-right {
    display: inline-block;
    width: calc(100% - 204px);
    height: 100%;
    border-top: 4px solid #f7f7f7;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 11px;
  }
}
</style>